﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Lock.aspx.cs" Inherits="DelonixRegia._lock" %>

<!DOCTYPE html>
<html class="lockscreen">
<head>
    <meta charset="UTF-8">
    <title>Account Locked - Delonix Regia</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>

    <link href="CSS/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="CSS/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="CSS/DelonixRegia.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <noscript>
        <meta http-equiv="refresh" content="0; url=/NoJS.aspx" />
    </noscript>
    <form id="lockForm" runat="server">
        <div class="center" id="lockscreenDiv" style="display:none;" runat="server">
            <div class="headline text-center" id="time">
                9:42:33 PM
            </div>

            <div class="lockscreen-name">
                <asp:Label ID="lblUsername" runat="server" Text="John Doe"></asp:Label></div>

            <div class="lockscreen-item">
                <div class="lockscreen-image">
                    <img src="Images/profile.png" alt="Profile Image" />
                </div>

                <div class="lockscreen-credentials">

                    <div class="input-group">
                        <asp:TextBox ID="tbxPassword" runat="server" Placeholder="password" CssClass="form-control" TextMode="Password"></asp:TextBox>
                        <div class="input-group-btn">
                            <button class="btn btn-flat" id="btnSubmit"><i class="fa fa-arrow-right text-muted"></i></button> <!-- ADD JS OnClick and OnEnter to handle login -->
                        </div>
                    </div>
                </div>

            </div>

            <div class="lockscreen-link">
                <a href="SignIn.aspx">Or sign in as a different user</a>
            </div>
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script src="Scripts/bootstrap.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            /* CENTER ELEMENTS IN THE SCREEN */
            jQuery.fn.center = function () {
                this.css("position", "absolute");
                this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
                        $(window).scrollTop()) - 30 + "px");
                this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
                        $(window).scrollLeft()) + "px");
                return this;
            }

            $(function () {
                $(".center").center();
                startTime();

                $(window).resize(function () {
                    $(".center").center();
                });

                if ($('#lockscreenDiv').css('display') == 'none') {
                    $('#lockscreenDiv').show('drop', { direction: 'up', duration: 700 });
                }
                $('#tbxPassword').focus();

                $('#lockForm').submit(function () {
                    if ($('#tbxPassword').val().length == 0) {
                        return false;
                    }
                });
            });

            function startTime() {
                var today = new Date();
                var h = today.getHours();
                var m = today.getMinutes();
                var s = today.getSeconds();

                // add a zero in front of numbers<10
                m = checkTime(m);
                s = checkTime(s);

                //Check for PM and AM
                var day_or_night = (h > 11) ? "PM" : "AM";

                //Convert to 12 hours system
                if (h > 12)
                    h -= 12;

                $('#time').html(h + ":" + m + ":" + s + " " + day_or_night);
                setTimeout(function () {
                    startTime()
                }, 500);
            }

            function checkTime(i) {
                if (i < 10) {
                    i = "0" + i;
                }
                return i;
            }
        </script>
    </form>
</body>
</html>
